<template>
  <!-- <div class="container" :style="{width:width,height:height}"> -->
  <div class="container">
    <div class="success-tp">
       <img :src="backgroundImageUrl" alt="" srcset="">
    </div>
    <div class="success-title">您还有<span> {{lotteryCount}} </span>次抽奖机会</div>
    <!-- 背景图 -->
    <!-- <image :src="backgroundImageUrl" model="aspectFill" class="background_image" v-if="backgroundImageUrl"></image> -->
    <!-- 九宫格 -->
    <div class='sudoku'>
      <!-- <p class="showT">你还剩余<span>{{lotteryCount}}</span>次抽奖机会</p> -->
        <!-- <image src="/static/images/rongq.png" model="aspectFill" class="gdbackground_image"></image> -->
        <div class="zhuanpan">
        <div class="square" :style="{opacity:activatedColorIndex==0?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[0]&&prizeImages[0].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[0]?prizeImages[0].prizeName:'' }}
          <!-- <image :src="prizeImages[0].primary_pic_url" model="aspcetFit"></image>        -->
        </div>
        <div class="square" :style="{opacity:activatedColorIndex==1?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[1]&&prizeImages[1].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[1]?prizeImages[1].prizeName:'' }}
          <!-- <image :src="prizeImages[1].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        <div class="square" :style="{opacity:activatedColorIndex==2?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[2]&&prizeImages[2].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[2]?prizeImages[2].prizeName:'' }}
          <!-- <image :src="prizeImages[2].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        <div class="square" :style="{opacity:activatedColorIndex==7?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[7]&&prizeImages[7].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[7]?prizeImages[7].prizeName:'' }}
          <!-- <image :src="prizeImages[7].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        <div class="square" :style="{opacity:activatedColorIndex==8?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[8]&&prizeImages[8].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[8]?prizeImages[8].prizeName:'' }} 
          <!-- <image :src="prizeImages[8].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        <div class="square" :style="{opacity:activatedColorIndex==3?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[3]&&prizeImages[3].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[3]?prizeImages[3].prizeName:'' }}
          <!-- <image :src="prizeImages[3].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        <div class="square marginBottomNo" :style="{opacity:activatedColorIndex==6?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[6]&&prizeImages[6].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[6]?prizeImages[6].prizeName:'' }}
          <!-- <image :src="prizeImages[6].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        <div class="square marginBottomNo" :style="{opacity:activatedColorIndex==5?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[5]&&prizeImages[5].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[5]?prizeImages[5].prizeName:'' }}
          <!-- <image :src="prizeImages[5].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        <div class="square marginBottomNo" :style="{opacity:activatedColorIndex==4?'1': ( startGame ? '0.7' : '1' ),width:squareWidth,height:squareHeight,marginLeft:squareMarginLeft,marginBottom:squareMarginBottom}">
          <image class="s1" v-if="prizeImages[4]&&prizeImages[4].prizeType!=0" src="/static/images/pick.png" model="aspcetFit"></image>  
          <image class="s2" v-else src="/static/images/nogif.png" model="aspcetFit"></image>  
          {{ prizeImages[4]?prizeImages[4].prizeName:'' }}
          <!-- <image :src="prizeImages[4].primary_pic_url" model="aspcetFit"></image> -->
        </div>
        </div>
    </div>
    <div class="success-btn" v-if="lotteryCount>0" @click="clickLuck">
        <img :src="lotteryButtonImage" alt="" srcset="">
    </div>
     <div class="success-btn" v-else @click="clickLuck">
        <img src="https://higo-oss.oss-cn-hangzhou.aliyuncs.com/static/images/no_draw.png" alt="" srcset="">
    </div>
    <div class="success-name">
        <div class="name-img">
            <img src="https://fft-oss.oss-cn-hangzhou.aliyuncs.com/fft_mall/name_sr.png" alt="" srcset="">
        </div>
        <div class="success-list">
             <swiper class="tab-right"  vertical="true" autoplay="true" circular="true" interval="2000" :display-multiple-items='listName.length>7?8:listName.length'>
                <view class="right-item">
                    <div  v-for="(item,index) in listName" :key="index">
                    <swiper-item>
                        <div class='content-item'>
                        <text class='name n2'>{{item.userId}}</text>
                        <text class='name n2'>{{item.userTel}}</text>
                        <text class='name n3'>{{item.prizeName}}</text>
                        </div>
                    </swiper-item>
                    </div> 

                </view>
                </swiper>
        </div>
    </div>
    <!-- <div class="huodong_pop">
            <van-popup 
            :show="huodongShow" 
            bind:close="onClose"
            >
                <div class="box">
                    <div class="hd_img">
                        <p class="img">
                            <img src="/static/images/huodong.png" alt="">
                        </p>
                        <div class="mc" @click="toActivity">
                          <p>{{targegift.id>0?'中奖啦':'很遗憾，未中奖'}}</p>
                          <p v-if="targegift.id>0">恭喜您获得{{targegift.luck_content}}</p>
                          <p v-else>别灰心，下次再来吧</p>
                        </div>
                    </div>
                    <p class="close">
                        <img @click="huodongShow = false" src="/static/images/pop_close.png" alt="">
                    </p>
                </div>
            </van-popup>
        </div> -->
        <van-popup 
            :show="getTarget" 
            @close="getTarget=false"
            >
                <div class="roll-box">
                    <div class="roll-bg">
                    <img src="https://higo-oss.oss-cn-hangzhou.aliyuncs.com/static/images/fail_d.png" alt="" srcset="">
                   </div>
                    <div class="texu">恭喜你中奖啦</div>
                   <div class="roll-show">
                    <div class="show-im">
                      {{ targegift && targegift.prizeName }}
                    <!-- <img :src="targegift&&targegift.primary_pic_url" alt="" srcset=""> -->
                    </div>
                   </div>
                   <div class="roll-btn">
                    <block v-if="lotteryCount>0">
                      <div class="btn1" @click="goLook">查看奖品</div>
                    <div class="btn2"  @click="goctu">继续抽奖</div>
                    </block>
                    <block v-else> 
                       <div class="btn3" @click="goLook">查看奖品</div>
                    </block>
                   </div>
                   <div class="roll-close" @click="getTarget=false">
                    <img src="https://higo-oss.oss-cn-hangzhou.aliyuncs.com/static/images/close.png" alt="" srcset="">
                   </div>
                </div>
            </van-popup>
             <van-popup 
              :show="getTarget1" 
              @close="getTarget1=false"
              >
                <div class="roll-box2">
                   <div class="roll-bg2" >
                    <img src="https://higo-oss.oss-cn-hangzhou.aliyuncs.com/static/images/success_d.png" alt="" srcset="">
                   </div>
                   <div class="texu">很遗憾，未中奖</div>
                    <div class="roll-btn">
                    <div class="btn4" v-if="lotteryCount>0" @click="goctu">继续抽奖</div>
                    <div class="btn4" v-else @click="goctu">我知道了</div>
                   </div>
                   <div class="roll-close" @click="getTarget1=false">
                    <img src="https://higo-oss.oss-cn-hangzhou.aliyuncs.com/static/images/close.png" alt="" srcset="">
                   </div>
                </div>
            </van-popup>
  </div>
</template>
 
<script>
/*
 * @Author: wujiayi
 * @Date: 2019-08-19
 * @Last Modified by: wujiayi
 * @Last Modified time: 2019-08-19
 */

//定时器
let interval = null;
let timer = null;
//九宫格旋转速度，值越大速度越慢
let rotationalSpeed = 30;

export default {
    props:{
        width:{ //九宫格容器宽度
            type:String,
            default:'100%',
        },
        height:{ //九宫格容器高度
            type:String,
            default:'100%',
        },
        backgroundImageUrl:{ //九宫格容器背景图片
            type:String,
            default:'https://of-cook-oss.oss-cn-beijing.aliyuncs.com/img/my/bg.png',
        },
        squareWidth:{ //九宫格格子宽度
            type:String,
            default:'170rpx',
        },
        squareHeight:{ //九宫格格子高度
            type:String,
            default:'170rpx',
        },
        squareMarginLeft:{ //九宫格格子左边距
            type:String,
            default:'10rpx',
        },
        squareMarginBottom:{ //九宫格格子下边距
            type:String,
            default:'10rpx',
        },
        bgColor:{ //九宫格格子背景颜色
            type:String,
            default:'none',
        },
        prizeImages:{ //奖品列表图片
            type:Array
        },
        listName:{
            type:Array //中奖名单
        },
        lotteryButtonImage:{ //抽奖按钮图片
            type:String,
        },
        lotteryCount:{ //抽奖次数
            type:Number,
            default:0,
        },
    },

  data() {
    return {
      activatedColorIndex: -1, //当前位置选中状态
      btnDisabled:false,//抽奖按钮是否可以点击
      startGame:false,//是否正在抽奖
      huodongShow:false,
      targegift:{},
       getTarget:false,
      getTarget1:false,
    };
  },
  methods: {
    goctu(){
       this.getTarget1=false
       this.getTarget=false
      
    },
    goLook(){
      //console.log('查看奖品')
      //console.log(this.targegift)
      if (this.targegift.prizeType == 1) {
        wx.redirectTo({
          url: `/pages/home/cardList/main`
        })
      } else if (this.targegift.prizeType == 2) {
        wx.redirectTo({
          url: `/pages/daka/main`
        })
      }
      this.getTarget1=false
      this.getTarget=false
      //  wx.redirectTo({
      //   url: `/pages/myAward/main`
      // })    
    },

    //点击抽奖按钮
    clickLuck() {
      let that = this;
      //判断是否可以点击抽奖按钮
      if (that.lotteryCount<=0) {
          mpvue.showToast({
              title:'亲，没有可抽奖的机会了哦~',
              icon:'none'
          })
          return
      }
      if (this.btnDisabled) {
          return
      }

      this.btnDisabled = !this.btnDisabled;
      this.startGame = true;
      that.lotteryCount--;
      interval && clearInterval(interval);
      // 九宫格旋转(设置当前位置选中状态)
      let index = 0;
      interval = setInterval(function() {
        if (index > 8) {
          index = 0;
        }
        that.activatedColorIndex = index;
        index++;
      }, rotationalSpeed);
      that.$emit('getlotteryPosition')
    },

    // 九宫格旋转减速
    stop(lotteryPosition) {
      let that = this;
      that.targegift=this.prizeImages[lotteryPosition]
      interval && clearInterval(interval);
      let currentIndex = that.activatedColorIndex + 1;
      that.stopLuck(lotteryPosition, currentIndex, rotationalSpeed, 30);
    },

    /**
     * lotteryPosition:中奖位置
     * currentIndex:当前选中位置
     * speed：九宫格旋转速度
     * stepTime：每次增加的旋转时间 值越大旋转速度越慢
     */
    stopLuck(lotteryPosition, currentIndex, speed, stepTime) {
      let that = this;
      timer && clearTimeout(timer);
      timer = setTimeout(()=> {

        if (currentIndex > 8) {
          currentIndex = 0;
        } 

        //当前位置为选中状态
        that.activatedColorIndex = currentIndex;

        //如果旋转时间过短或者当前位置不等于中奖位置则递归执行直到旋转至中奖位置
        if (speed < 300 || currentIndex != lotteryPosition) {
          //旋转速度越来越慢
          stepTime++;
          speed += stepTime;
          //当前位置+1
          currentIndex++;
          that.stopLuck(lotteryPosition, currentIndex, speed, stepTime);
        } else {
            //抽奖结束
            setTimeout(() => {
                if(this.targegift.prizeType!=0){
                     this.getTarget=true
                }else{
                     this.getTarget1=true
                }
            }, 500);
          
            setTimeout(() => {
                  that.activatedColorIndex = -1;
                  that.btnDisabled = !that.btnDisabled;
                  that.startGame = false; 
            }, 800);
        
            // //假设中奖
            // setTimeout(()=>{
            //   mpvue.showModal({
            //     title: '恭喜中奖',
            //     content: '恭喜您获得xxx',
            //     showCancel: false,
            //     success: function(res) {
            //       if (res.confirm) {
            //           that.activatedColorIndex = -1;
            //           that.btnDisabled = !that.btnDisabled;
            //           that.startGame = false;   
            //       }
            //     }
            //   })
            // },500)
          }
      }, speed);
    }
  }
};
</script>
<style scoped lang="scss">
 .container {
  position: relative;
  margin: auto;
  padding: 0 !important;
  /deep/ .van-popup{
        background: none;
    }
       .roll-box2{
      width: 634rpx;
    height: 1100rpx;
    margin: 400rpx auto 0 auto;
    position: relative;
     .roll-bg2{
    width: 634rpx;
    height: 701rpx;
    position: absolute;
    top:0;
    left:0;
      img{
      width: 100%;
      height: 100%;
    }
    }
    .texu{
      width: 297rpx;
      height: 45rpx;
      font-size: 40rpx;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 45rpx;
      color: rgba(250, 76, 3, 1);
      position: absolute;
      left: 169rpx;
      top: 30rpx;
      text-align: center;
    }
    .roll-btn{
      width: 414rpx;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 531rpx;
      left: 110rpx;
      .btn4{
        width: 414rpx;
        height: 100rpx;
        opacity: 1;
        border-radius: 249rpx;
        background: linear-gradient(270deg, rgb(246, 80, 159) 0%, rgb(248, 143, 75) 79.49%, rgb(250, 157, 71) 100%);

border: 4px solid rgb(252, 229, 154);   
        font-size: 46rpx;
      font-weight: 700;
      letter-spacing: 0px;
     color: rgba(255, 255, 255, 1);
      line-height: 100rpx;
      text-align: center;
      }
    }
     .roll-close{
      width: 82rpx;
      height: 82rpx;
      overflow: hidden;
      position: absolute;
      top:733rpx;
      left:295rpx;
      img{
        width: 100%;
        height: 100%;
      }
    }
    
    }
  .roll-box{
    width: 672rpx;
    height: 1100rpx;
    margin: 0 auto;
    position: relative;
    .roll-bg{
    width: 672rpx;
    height: 954rpx;
    position: absolute;
    top:0;
    left:0;
      img{
      width: 100%;
      height: 100%;
    }
    }
     
    .roll-close{
      width: 82rpx;
      height: 82rpx;
      overflow: hidden;
      position: absolute;
      top:983rpx;
      left:295rpx;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .roll-show{
      position: absolute;
      height: 260rpx;
      opacity: 1;
      border-radius: 16rpx;
      top:436rpx;
      left:206rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .show-im{
          height: 203rpx;
          display: flex;
          align-items: center;
          font-size:40rpx;
          img{
            width: 100%;
            height: 100%;
          }
      }
    }
    .texu{
      width: 297rpx;
      height: 45rpx;
      font-size: 40rpx;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 45rpx;
      color: rgba(250, 76, 3, 1);
      position: absolute;
      left: 169rpx;
      top: 370rpx;
      text-align: center;
    }
    .roll-btn{
      width: 544rpx;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 820rpx;
      left: 64rpx;
      .btn1{
          width: 260rpx;
        height: 90rpx;
        opacity: 1;
        border-radius: 249rpx;
        border: 4rpx solid rgb(255, 242, 203);
        font-size: 36rpx;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(255, 242, 203, 1);  
        text-align: center;
        line-height: 90rpx;
      }
      .btn2{
        width: 260rpx;
        height: 90rpx;
        opacity: 1;
        border-radius: 249rpx;
        background: linear-gradient(180deg, rgb(255, 196, 42) 0%, rgb(254, 251, 218) 100%);

        border: 4rpx solid rgb(255, 242, 203);  
        font-size: 36rpx;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(224, 70, 36, 1 );
        text-align: center;
        line-height: 90rpx;
      }
      .btn3{
        width: 414rpx;
        height: 100rpx;
        opacity: 1;
        border-radius: 249rpx;
        background: linear-gradient(180deg, rgb(255, 196, 42) 0%, rgb(254, 251, 218) 100%);
        border: 4rpx solid rgb(255, 242, 203);  
        font-size: 46rpx;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 0px;
      color: rgba(224, 70, 36, 1 );
      line-height: 100rpx;
      text-align: center;
      margin-left: 65rpx;
      }
      .btn4{
        width: 414rpx;
        height: 100rpx;
        opacity: 1;
        border-radius: 249rpx;
        background: linear-gradient(270deg, rgb(246, 80, 159) 0%, rgb(248, 143, 75) 79.49%, rgb(250, 157, 71) 100%);

border: 4rpx solid rgb(252, 229, 154);   
        font-size: 46rpx;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 0px;
     color: rgba(255, 255, 255, 1);
      line-height: 100rpx;
      text-align: center;
      margin-left: 65rpx;
      }
    }
  }
  .success-tp{
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 1147rpx;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .success-title{
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 24rpx;
    color: rgba(255, 255, 255, 1);
    width: 420rpx;
    height: 24rpx;
    text-align: center;
    position: absolute;
    margin: 0 auto;
    top: 124rpx;
    left: 169rpx;
    span{
        color: rgba(244, 30, 30, 1);
        padding: 0 6rpx;
    }
  }
  .success-name{
    width: 702rpx;
    height: 842rpx;
    opacity: 1;
    border-radius: 27rpx;
    background: rgba(232, 37, 7, 1);
    overflow: hidden;
    .name-img{
        width: 284rpx;
        height: 32rpx;
        overflow: hidden;
        margin: 46rpx auto 32rpx auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .success-list{
         width: 100%;
        .tab-right{
        width: 702rpx;
        height: 700rpx;
        margin: 0 auto;
        .content-item{
            padding: 0rpx 24rpx;
             height: 70rpx;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
           align-items: center;
           flex: 1;
           .name{
            font-size: 28rpx;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 70rpx;
            color: rgba(255, 255, 255, 1);
             overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
              text-align: left;
           }
           .n1{
            width: 15%;
           }
           .n2{
            width: 35%;
           }
           .n3{
            width: 50%;
           }
        }
        }
    }
    
  }
  .success-btn{
    position: absolute;
    width: 469rpx;
    height: 149rpx;
    top: 960rpx;
    left: 141rpx;
    img{
        width: 100%;
        height: 100%;
    }
  }
  .huodong_pop{
    /deep/ .van-popup{
        background: none;
    }
    .box{
        width: 100%;
        text-align: center;
        .hd_img{
            width: 672rpx;
            height: rpx;
            position: relative;
            img{
                width: 610rpx;
                height: 618rpx;
            }
            .mc{
                position: absolute;
                width: 100%;
                top: 25px;
                height: 200rpx;
                // bottom:140rpx;
                p:first-child{
                  font-size: 42rpx;
                  font-weight: 700;
                  color: rgba(227, 32, 34, 1);
                  text-align: center;
                }
                p:last-child{
                  font-size: 32rpx;
                  font-weight: 500;
                  color: rgba(0, 0, 0, 1);
                  text-align: center;
                  margin-top: 16px;
                }
            }
        }
        .close{
            width: 610rpx;
            text-align: center;
            img{
                display: block;
                width: 54rpx;
                height: 54rpx;
                text-align: center;
                margin:0 auto;
            }
        }
    }
    
}

   .sudoku {
    width: 530rpx;
    height: 530rpx;
    padding: 12rpx;
    margin: 367rpx auto 258rpx auto;
    z-index: 2;
    position: relative;
    // display: flex;
    // align-items: center;
    overflow: hidden;
    .showT{
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(89, 62, 28, 1);
      text-align: center;
      margin-top: 12rpx;
      span{
        color: #F70000FF;
      }
    }
    .gdbackground_image{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    }
    .zhuanpan{
      width: 554rpx;
      display: flex;
    flex-wrap: wrap;
    .square1{
      image {
        width: 100%;
        height: 100%;
      }

    }
      .square {
        background: rgba(255, 255, 255, 1);
        border-radius: 16rpx;
        box-shadow: 0 0 6rpx rgba(252, 215, 202, 1);;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
      &:nth-of-type(3n-2) {
        margin-left: 0 !important;
      }
      .s1{
        width:120rpx;
        height: 99rpx;
      }
      .s2{
        width:99rpx;
        height: 99rpx;
      }
      p{
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        text-align: center;
      }
    }
     .marginBottomNo {
      margin-bottom: 0 !important;
    }
    }
     
  }
}
</style>